<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">销量统计表</div>
      <div class="sub_title">1901 - 1914 服装销量统计表</div>
      <slot name="title"></slot>
    </div>
    <div id="bar_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
export default {
  data() {
    return {
      chart: null,
      dataList: [
        { year: "1909 年", type: "衣服", nums: 13.6 },
        { year: "1910 年", type: "衣服", nums: 14.8 },
        { year: "1911 年", type: "衣服", nums: 13.2 },
        { year: "1912 年", type: "帽子", nums: 12.4 },
        { year: "1913 年", type: "帽子", nums: 13.6 },
        { year: "1914 年", type: "帽子", nums: 14.2 },
      ],
    };
  },
  created() {
    // 模拟数据变化
    setTimeout(() => {
      this.dataList.push(
        { year: "1915 年", type: "裤子", nums: 13.5 },
        { year: "1916 年", type: "裤子", nums: 12.8 },
        { year: "1917 年", type: "裤子", nums: 10.8 }
      );
    }, 2000);
  },
  mounted() {
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "bar_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 100, 80],
    });
    // 给图表赋值
    this.chart.data(this.dataList);
    // 坐标系变换
    this.chart.coordinate().transpose();
    // 设置度量
    this.chart.scale({
      nums: {
        // nice 是否字段分配刻度
        nice: true,
        // 把 nums 重命名为 销售量，因为图表默认会把键值当作显示的元素。我们不想显示 nums 而是希望展示更易懂的 “销售量”，所有进行了定义别名。
        alias: "销售量",
        // 将所有 nums 输出的值进行变形，给他加上单位
        formatter: (val) => {
          return val + "万件";
        },
      },
    });
    // 设置提示信息
    this.chart.tooltip({
      // 是否显示 tooltips 辅助线。
      showCrosshairs: true,
      showMarkers:false,
    });
    // 设置坐标轴，这里只设置了 nums 的坐标轴。
    this.chart.axis("nums", {
      // 设置 title , 当前 title 的内容为键值 nums，因为 nums 设置了别名所以显示销售量
      title: {
        // 文字样式
        style: {
          fontSize: 16, // 文本大小
          textAlign: "center", // 文本对齐方式
        },
        // 文字偏移量
        offset: 60,
      },
    });

    // 绘制 线  x 轴为 year y 轴为 nums。图形形状为 smooth (平滑线)
    this.chart
      .interval({
        // 配置区间图背景
         background: {
          style: {
            radius: 8,
          },
        },
      })
      .position("year*nums")
      .color('type',['#face1d', '#37c461', '#2194ff'])
      // size 可以设置图形得大小
      // .size(18)
    // 取消图例交互
    // this.chart.removeInteraction("legend-filter");

    // 渲染图表
    this.chart.render();
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      console.log(newValue);
      this.chart.changeData(newValue);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>